<template>
  <div class="img-container">
    <el-upload
      class="upload-demo"
      :headers="headers"
      :show-file-list="false"
      :action="serveHost + '/admin/xy/upload/uploadImg'"
      :on-success="upload"
      multiple
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <!-- 原生代码上传 -->
    <!-- <input type="file" @change="upload($event)" /> -->
    <el-row :gutter="20" class="content">
      <el-col :span="4" class="per" v-for="item in fileList" :key="item.id">
        <el-card class="card">
          <div class="pic">
            <img :src="serveHost + '/' + item.dir + '/' + item.fileName" alt />
          </div>
          <div class="bottom">
            <el-tag class="title">{{item.title}}</el-tag>
            <el-button type="text" class="edit" @click="edit(item)" style="color:gray">编辑</el-button>
            <el-button type="text" class="del" @click="del(item)">删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="block" style="margin-top:20px;float:right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRow"
      ></el-pagination>
    </div>
    <div class="mask" v-show="flag">
      <div class="preview">
        <img :src="tempSrc" alt />
        <div class="info">
          <el-input v-model="title" size="mini" @change="updTitle(item)"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { updateTitle, list, delItem,uploadImg } from "@/api/material/img";
import { getToken } from '@/utils/myAuth'
import settingsFile from "@/settings";
export default {
  components: {},
  data() {
    return {
      flag: false,
      serveHost: settingsFile.host,
      totalPage: 0,
      totalRow: 0,
      currentPage: 1,
      pageSize: 12,
      fileList: [],
      tempSrc: "",
      title: "",
      item: {},
    };
  },
  computed: {
    headers(){
      return{
        'bufan-token':getToken()
      }
    }
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      console.log(this.currentPage);
      this.getList();
    },
    upload(file) {
      console.log(file);
      // this.title = file.url.split('/')[1]
      // console.log(this.title);
      this.getList()
    },
    edit(item) {
      // console.log(item);
      this.flag = true;
      this.tempSrc = this.serveHost + "/" + item.dir + "/" + item.fileName;
      this.title = item.title;
      this.item = item;
    },
    updTitle(item) {
      console.log(item);
      updateTitle({
        title: this.title,
        id: item.id
      }).then(res => {
        console.log(res);
        item.title = this.title
        // var i = this.fileList.findIndex(el => el.id == this.item.id);
        // this.fileList[i].fileName = this.title;
        this.flag = false;
      });
    },
    getList() {
      list({
        start: this.currentPage,
        limit: this.pageSize
      }).then(res => {
        this.fileList = res.data.list;
        this.totalPage = res.data.totalPage;
        this.totalRow = res.data.totalRow;
        console.log(res);
      });
    },
    del(item) {
      this.$confirm("您确定要删除当前项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delItem({
          id: item.id
        }).then(res => {
          console.log(res);
          var i = this.fileList.findIndex(el => el.id == item.id);
          this.fileList.splice(i, 1);
          this.getList();
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.img-container {
  padding: 20px;
  box-sizing: border-box;
  .content{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .per {
    height: 200px;
    margin-bottom: 20px;
    .card {
      position: relative;
      height: 200px;
      .pic {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        text-align: center;
        .title {
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translate(0, -50%);
          width: 50px;
          height: 25px;
          line-height: 25px;
          font-size: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .edit {
          width: 40px;
          height: 20px;
          position: absolute;
          top: 50%;
          right: 50px;
          font-size: 12px;
          transform: translate(0, -76%);
        }
        .del {
          width: 40px;
          height: 20px;
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -76%);
          color: red;
          font-size: 12px;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    .preview {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 220px;
      img {
        width: 100%;
        height: 200px;
      }
      .info {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
